<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 知识点 Demo</title>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    .container {
        width: 90%;
        margin: auto;
    }
    fieldset {
        margin-bottom: 20px;
        padding: 10px;
    }
    /* 字 */
    .font-example p {
        font-size: 16px;
        font-weight: bold;
        line-height: 1.5;
        text-align: center;
    }
    /* 色 */
    .color-example p {
        color: #3498db;
        border: 2px solid #e74c3c;
        background-color: rgba(52, 152, 219, 0.3);
    }
    /* 形 */
    .shape-example div {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        border-radius: 10px;
        box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
        margin: 20px auto;
    }
    /* 空 */
    .space-example div {
        width: 100px;
        height: 100px;
        background-color: #e74c3c;
        margin: 20px;
        padding: 10px;
    }
    /* 图 */
    .media-example img, .media-example audio, .media-example video {
        display: block;
        margin: 10px 0;
        max-width: 100%;
    }
</style>
</head>
<body>
<div class="container">
    <fieldset class="font-example">
        <legend>字 - 字体，字号、加粗，行高，居中，对齐等。</legend>
        <p>这是一个展示字体样式的段落。</p>
    </fieldset>

    <fieldset class="color-example">
        <legend>色 - 文本色、边框色、背景色、透明度。</legend>
        <p>这是一个展示颜色样式的段落。</p>
    </fieldset>

    <fieldset class="shape-example">
        <legend>形 - 边框、圆角、阴影。</legend>
        <div></div>
    </fieldset>

    <fieldset class="space-example">
        <legend>空 - margin，padding 都能熟练使用。</legend>
        <div></div>
    </fieldset>

    <fieldset class="media-example">
        <legend>图 - 多媒体的使用，图片+视频+音频。</legend>
        <img src="ui/img/wx.png" alt="示例图片">
        <audio controls>
            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
            您的浏览器不支持 audio 元素。
        </audio>
        <video width="320" height="240" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            您的浏览器不支持 video 元素。
        </video>
    </fieldset>
</div>
</body>
</html>